<template>
  <div class="cell_group">
    <div class="cell">
      <div class="title">
        {{config.attrName}}
        <div class="plate" @click="popupShow = true">{{value}}</div>
      </div>
      <input :class="{'isWrong':!noWrong}" type="text" :placeholder="'请输入'+config.attrName" v-model="plate" @blur="changeName('blur')" @focus="changeName('focus')" :maxlength="this.config.inputMax">
      <van-popup v-model="popupShow" position="bottom">
        <van-picker show-toolbar :columns="columns" :default-index="0" @cancel="onCancel" @confirm="onConfirm" />
      </van-popup>
    </div>
  </div>
</template>
<script>
export default {
  name: "car_number",
  props: {
    config: {
      type: Object,
      required: true
    },
    parentIndex: Number,
    itemIndex: Number
  },
  data() {
    return {
      noWrong: true,
      popupShow: false,
      columns: [
        "京",
        "津",
        "冀",
        "沪",
        "渝",
        "豫",
        "云",
        "辽",
        "黑",
        "湘",
        "皖",
        "鲁",
        "新",
        "苏",
        "浙",
        "赣",
        "鄂",
        "桂",
        "甘",
        "晋",
        "蒙",
        "陕",
        "吉",
        "闽",
        "贵",
        "粤",
        "青",
        "藏",
        "川",
        "宁",
        "琼",
        "港",
        "澳",
        "台"
      ],
      value: "鲁",
      plate: "",
      //车牌号验证写死 伊琳琳确认 19/9/11
      patternCondition:'^(([A-Z](([0-9]{5,6}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4,5})))|([A-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳使领]))$',
    };
  },
  created() {
    if (this.config.value) {
      this.value = this.config.value.substring(0, 1);
      this.plate = this.config.value.substr(1);
    }
  },
  watch: {
    config(n) {
      if (n.value) {
        this.value = n.value.substring(0, 1);
        this.plate = n.value.substr(1);
      }
    }
  },
  methods: {
    changeName(e) {
      if (e === "focus") {
        this.noWrong = true;
      } else {
        if (this.value && this.plate) {
          this.plate = this.plate.toUpperCase()
          this.config.value = this.value + this.plate;
          this.noWrong = new RegExp(this.patternCondition).test(
          this.plate
        );
        } else if(!this.plate){
          this.config.value = '';
          this.noWrong = true;
        }
        
        this.config.noWrong = this.noWrong
         this.$emit(
          "changeValue",
          this.parentIndex,
          this.itemIndex,
          this.config
        );
      }
    },
    onConfirm(event) {
      this.popupShow = false;
      this.value = event;
      if (event && this.plate) {
        this.config.value = event + this.plate;
        this.config.noWrong = this.noWrong
        this.$emit(
          "changeValue",
          this.parentIndex,
          this.itemIndex,
          this.config
        );
      }
    },
    onCancel() {
      this.popupShow = false;
    }
  }
};
</script>
<style lang="less">
.plate {
  margin-left: 0.2rem;
  width: 0.613333rem;
  height: 0.613333rem;
  background: url("~@/assets/img/plate.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.346667rem;
  color: rgba(42, 103, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

